import { Button, Stack, TextField, Typography, styled } from '@mui/material'
import { useAppSelector } from '../../hooks'
import { selectUser } from '../../store/reducers/selectors'
import { useEffect, useState } from 'react'
import { useEditUserMutation } from '../../api/userApiSlice'
import { GoBackButton } from '../../components/shared/goBackButton'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	marginBottom: '10px',
	width: '992px',
	justifyContent: 'flex-start',
	flexDirection: 'column',
}))

const StyledSave = styled(Button)(() => ({
	marginTop: '24px',
	marginBottom: '24px',
	width: 'fit-content',
	height: '32px',
	padding: '9px, 16px, 9px, 16px',
	borderRadius: '87px',
	border: '1px',
	borderStyle: 'solid',
	textTransform: 'none',
	borderColor: '#7B8E98',
	color: '#000000',
}))

const StyledHeader = styled(Typography)(() => ({
	display: 'flex',
	styleName: 'Header : H1/ExtraBold',
	fontFamily: 'Nunito',
	fontSize: '28px',
	fontWeight: '800',
	lineGeight: '32px',
	letterSpacing: '0em',
	textAlign: 'left',
	marginBottom: '20px',
}))

const StyledChangePassword = styled(Typography)(() => ({
	marginTop: '24px',
	marginBottom: '24px',
	styleName: 'Body : P1/ExtraBold',
	fontFamily: 'Nunito',
	fontSize: '16px',
	fontWeight: '800',
	lineHeight: '20px',
	letterSpacing: '0em',
	textAlign: 'left',
}))

const StyledTextField = styled(TextField)(() => ({
	width: 'fit-content',
}))

const ProfileEdit = () => {
	const user = useAppSelector(selectUser)
	const [edtiUserFn] = useEditUserMutation()

	const [userName, setUserName] = useState(user?.name)
	const [userAbout, setUserAbout] = useState(user?.about)
	const [saveUserDisabled, setSaveUserDisabled] = useState(true)

	useEffect(() => {
		setSaveUserDisabled(user?.name === userName && user?.about === userAbout)
	}, [user?.name, user?.about, userName, userAbout])

	const handleEditUser = () => {
		if (userName && userAbout) edtiUserFn({ name: userName, about: userAbout })
	}
	return (
		<StyledContainer>
			<GoBackButton />
			<StyledHeader>Мои данные</StyledHeader>
			<Stack direction={'row'} spacing={2}>
				<StyledTextField
					label='Имя'
					defaultValue={userName}
					onChange={(event) => setUserName(event.target.value)}
				/>
				<StyledTextField label='Почта' defaultValue={user?.email} disabled />
				<StyledTextField
					label='Обо мне'
					defaultValue={userAbout}
					onChange={(event) => setUserAbout(event.target.value)}
				/>
			</Stack>
			<StyledSave onClick={handleEditUser} disabled={saveUserDisabled}>
				Сохранить
			</StyledSave>
			<StyledChangePassword>Изменить пароль</StyledChangePassword>
			<Stack direction={'column'} spacing={2}>
				<StyledTextField disabled placeholder='Старый пароль' />
				<StyledTextField disabled placeholder='Новый пароль' />
			</Stack>
			<StyledSave disabled>Сохранить</StyledSave>
		</StyledContainer>
	)
}

export default ProfileEdit
